<template>
	<el-main>
		<el-card v-for="item in configGroup" :key="item.group" shadow="never" :header="item.group"
			style="margin-bottom: 15px;">
			<el-alert v-if="item.group === '咨询记录设置'" size="small" :closable="false" show-icon type="warning"
				title="姓名+手机号重复的咨询在任何设置下，均不允许录入!"></el-alert>
			<el-table :data="item.items">
				<el-table-column width="80">
					<template #="{ row }">
						<el-switch v-if="row.fieldType === 'switch'" :model-value="row.v === 'true' ? true : false"
							@change="changeSwitch(row)">
						</el-switch>
						<el-input v-else v-model="row.v" @change="changeInput(row)"></el-input>
					</template>
				</el-table-column>
				<el-table-column prop="label"></el-table-column>
			</el-table>
		</el-card>
	</el-main>
</template>

<script setup lang="ts">
import { getConfigPageApi, postConfigAOUApi } from '@renderer/api/recruit_config';
import { ConfigForm, ConfigGroupItem } from '@renderer/interface/recruit_config';
import { onMounted, ref } from 'vue';

// 获取设置信息
const configGroup = ref<ConfigGroupItem[]>([])
const getConfigPageData = async () => {
	const { code, data } = await getConfigPageApi()
	if (code !== '200') return

	configGroup.value = data
}

// switch改变时
const selectConfig = ref<ConfigForm>({
	k: '',
	v: '',
	type: '',
	enabled: '',
	fieldType: '',
	label: ''
})
const changeSwitch = async (row) => {
	Object.assign(selectConfig.value, row)
	selectConfig.value.v = selectConfig.value.v === 'true' ? 'false' : 'true'
	const { code } = await postConfigAOUApi(selectConfig.value)
	if (code !== '200') return

	getConfigPageData()
	ElMessage.success('修改成功~')
}
// input改变时
const changeInput = async (row) => {
	const { code } = await postConfigAOUApi(row)
	if (code !== '200') return

	getConfigPageData()
	ElMessage.success('修改成功~')
}

// 页面挂载后
onMounted(() => {
	getConfigPageData()
})
</script>

<style scoped></style>